Getting Started with THREE.JS in 2021!

413,240 views413K views

Mar 16, 2021

947K subscribers

https://bit.ly/3vveoV6 - Become a frontend developer (50% off limited time!) -- Want to learn UI/UX? https://designcourse.com -- Check out Bruno's Three.js Course: https://bit.ly/3qU6elv (30% off for the first 15 students, using my code! Note, this is not a paid sponsorship.) -- Today, marks day #1 that we're going to begin learning Three.js together. I've always wanted to create immersive webgl experiences, but I never sat for long enough and gave it a go. Recently, that's changed -- and I'm going to share what I've learned with you in order to create some awesome examples. Three.js allows you to harness the power of WebGL in order to create 3D experiences in the browser. There's so much to learn, and today is just our first step. In the future, we're going to be creating more elaborate examples. The github repo for the threejs + webpack starter: https://github.com/designcourse/three... Bump map to convert to a normal map: https://coursetro.s3.amazonaws.com/he... 0:00 - Introduction 2:56 - An Awesome Offer 3:29 - Installing the Three.js Starter 5:30 - Folder Structure / Project Overview 7:22 - Three.js Boiler Plate Explained 13:10 - Starting our Project 43:09 - Adding Interactivity 51:00 - Adding Other HTML Elements 56:24 - Final Thoughts Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!

Introduction

An Awesome Offer

Installing the Three.js Starter

Folder Structure / Project Overview

Three.js Boiler Plate Explained

Starting our Project

Featured playlist

Show less

Pinned by DesignCourse

Excited to learn more Three.js? Me too. Look out for more videos soon!

View 18 replies

Bali Yacht Services

1 year ago (edited)

This is so awesome, thank you so much! Just a note to anyone following along, I found a bit of a confusing error: The section between 43:23 and 48:37 should have been removed (he codes it correctly after) -- looks mistake in the edit. To add animate START HERE: 48:37 (don't use the code at 43:23) Only found out after wasn't rendering and couldn't figure out why...

Read more

Cristian-Alexandru Radu

That's lovely you're making Three.JS playlist with a lot of tutorials ❤️

Bogdan Yunakov

Gary, thanks for the nice tutorial. I remember when I was a beginner in JS and I decided to watch a couple of your videos about animations, since that moment I become better every day.

MrTubeyboy

Thank you so much for this tutorial and your other tutorials as well. Your tutorials have definitely given me a push to the right direction and have helped me understand three JS a lot more. Very intuitive and clear tuts.🙏🏽

gytisbl

Hey Simon. You should update this video, because: `npm -i` says that data.gui is outdated: All versions of package dat.gui are vulnerable to Regular Expression Denial of Service (ReDoS) via specifically crafted rgb and rgba values.

Read more

Squid Armstrong

this tutorial is really helpful, love the way you explain things. looking forward to more three.js tutorials from you!

Abdeali Saria

1 year ago (edited)

more 3js please Sensei....will absolutely love a full in depth, full of examples 3js tutorial series...thanks!

soulriderist

Great tutorial. Very well explained. I always love your tutorials. Keep up the great work.

CHITUS💙⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

it was a great learning experience with you, thank you and It would be great if you make videos on react-three-fibre too, its a great for react.js and next.js

Thanks Simon, I've been looking for the right tutorials and training for three.js and I was able to use your code to get a discount. Much appreciated. Thanks for this video!

Donut Duck

Totally enjoyed this amazing three js tutorial!! Hope there will be more insights soon. Thank you!!

p1xelgho5t

Thanks for a great video Gary and also for the promo code. I have bought Bruno's course as well. Looking forward to more three.js goodies!

Олександр Данильченко

Great video. Explains basic concepts and shows that it's not that extra mysterious and hard

Vít Kozikowski

I wanted to look at it for months, but was discouraged because of the time I would need to put in because of the trial and error. Definitely looking forward to the playlist!

Tushonka

This is soo cool! I really appreciate this. Can't wait to make some 3D models in blender and use them on my website.

NecronFlux

Amazing course! I learnt a lot from this.

Mouldy Soul

I really would mind someone as good at teaching as yourself have a crack at explaining how in the pluck to mix react and three-js together. Last time I looked into it I got a bit lost in libraries/examples and could get things talking.

Ra

Stunning! How cool that it is! I am about to fall in love with Three JS. Thanks for your great tutorial!

Utkarsh Jha

Watched this vid yesterday and decided to go through the course. You were complaining about THREE being in all caps and the camel case methods. Js methods has always been camel case and bruno very clearly mentioned that we can keep whatever variable we want in place of THREE. I am using T for practice purpose. I hope it helps people having difficulty with it. Just change the import statement.

Introduction

An Awesome Offer

Installing the Three.js Starter

Folder Structure / Project Overview

Three.js Boiler Plate Explained

Starting our Project

Adding Interactivity

Adding Other HTML Elements

Final Thoughts

Sync to video time

https://bit.ly/3vveoV6 - Become a frontend developer (50% off limited time!) -- Want to learn UI/UX? https://designcourse.com -- Check out Bruno's Three.js Course: https://bit.ly/3qU6elv (30% off for the first 15 students, using my code! Note, this is not a paid sponsorship.) -- Today, marks day #1 that we're going to begin learning Three.js together. I've always wanted to create immersive webgl experiences, but I never sat for long enough and gave it a go. Recently, that's changed -- and I'm going to share what I've learned with you in order to create some awesome examples. Three.js allows you to harness the power of WebGL in order to create 3D experiences in the browser. There's so much to learn, and today is just our first step. In the future, we're going to be creating more elaborate examples. The github repo for the threejs + webpack starter: https://github.com/designcourse/three... Bump map to convert to a normal map: https://coursetro.s3.amazonaws.com/he... 0:00 - Introduction 2:56 - An Awesome Offer 3:29 - Installing the Three.js Starter 5:30 - Folder Structure / Project Overview 7:22 - Three.js Boiler Plate Explained 13:10 - Starting our Project 43:09 - Adding Interactivity 51:00 - Adding Other HTML Elements 56:24 - Final Thoughts Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!

Introduction

An Awesome Offer

Installing the Three.js Starter

Folder Structure / Project Overview

Featured playlist